<!doctype html>
<html>
    <head>
        <title>jsPlumb Webpack Test Page</title>
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
        <link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
        <link rel="stylesheet" href="demo.css">
    </head>
    <body data-demo-id="webpack">

    <a style="margin:10px 0 0 10px;display:inline-block" href="https://jsplumbtoolkit.com"><img src="../../img/logo-jsplumb-green.png"></a>

        <div id="one" class="w">HEY</div>
        <div id="two" class="w">HO</div>

        <div id="setup">

            Are the circles joined with two connections?

            <h3>Yes</h3>
            The first connection is made through a static instance of jsPlumb,
            which was registered on the window object by the built webpack bundle. The second connection is made by an
            instance of jsPlumb which is returned from a `require` call to some JS inside the bundle.

            <h3>No</h3>
            <p>
            You need to run a couple of npm commands in the project root.
            </p>

            <span>npm install</span>

            <ol>
                <li><p>Installs jsPlumb's dependencies</p></li>
                <li>Builds the final version of jsPlumb (not actually required for this demo; just telling you).</li>
                <li>
                    <p>Builds (and renames, to remove the version suffix, so we dont have to keep updating this page) the bundle that would
                        be published to npm via the <span>npm publish</span> command. In this demo we use a local require in our package json:
                    </p>
                    <pre>
  "devDependencies": {
    "grunt-webpack": "^1.0.11",
    "jsplumb": "file:../../jsplumb.tgz",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
                    </pre>

                    but we'd expect you to require jsPlumb from the npm repo:
                    <pre>
  "devDependencies": {
    "grunt-webpack": "^1.0.11",
    "jsplumb": "X.X.X",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
                    </pre>

                </li>
            </ol>

            <p>
                <span>npm run init</span>
            </p>

            <ol>
                <li>
                    <p>Runs <span>npm install</span> in this demo's directory.</p>
                    <p>To get webpack and jsPlumb.</p>
                </li>
                <li>
                    <p>Runs <span>grunt build</span> in this demo's directory</p>
                    <p>Which runs webpack and generates a <span>bundle.js</span> file in the <span>dist</span> directory of this demo</p>
                    <p>The webpack config is in the file <span>webpack.config.js</span></p>
                    <pre>
var path = require("path");
var webpack = require("webpack");
module.exports = {
    cache: true,
    entry: {
        bundle: "./index.js"
    },
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "dist/",
        filename: "[name].js",
        chunkFilename: "[chunkhash].js"
    }
};
                    </pre>
                </li>
            </ol>

            The <span>init</span> script recurses through each directory in the project and runs <span>npm install</span> when it finds a package.json,
            and <span>grunt build</span> when it finds a Gruntfile.js.
        </div>

        <!-- bundle.js both loads jsPlumb into the window and also uses `require` to get an instance on which it operates. -->
        <script src="dist/bundle.js"></script>

        <script>
            // global jsplumb on the window object.
            jsPlumb.ready(function () {

                var jsp = jsPlumb.getInstance({
                    Connector: "StateMachine",
                    Anchor: ["Perimeter", { shape: "Circle" }],
                    Endpoint: [ "Dot", { radius: 2 }],
                    ConnectionOverlays: [
                        [ "Arrow", { location: 1, width: 10, length: 7, foldbackPoint: 0.62 }]
                    ]
                });

                jsp.connect({source: "one", target: "two" });

                jsp.on(window, "resize", jsp.repaintEverything);
            });
        </script>

    <script src="../demo-list.js"></script>

    </body>
</html>